import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { ChartCard } from '@/components/Charts';
import numeral from 'numeral';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 8,
  style: { marginBottom: 24 },
};

const IntroduceRow = memo(({ loading, data }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="总报表数量"
        action={
          <Tooltip title="拉冬系统中所有报表数量">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        loading={loading}
        total={numeral(data.reportSize).format('0,0')}
        contentHeight={46}
      />
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="报表访问总次数"
        action={
          <Tooltip title="所有报表访问的次数和">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(data.visitSize + data.todayVisit).format('0,0')}
        contentHeight={46}
      />
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="今日访问量"
        action={
          <Tooltip title="今日报表访问总次数">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(data.todayVisit).format('0,0')}
        contentHeight={46}
      />
    </Col>
  </Row>
));

export default IntroduceRow;
